<template>
  <view class="unbind-phone-container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="back-arrow">←</text>
      </view>
      <text class="title">解绑手机号</text>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 提示文字 -->
      <view class="prompt-text">
        <text class="prompt">请输入原手机号</text>
      </view>

      <!-- 输入表单 -->
      <view class="form-container">
        <!-- 原手机号输入框 -->
        <view class="input-group">
          <input 
            class="phone-input" 
            v-model="originalPhone" 
            placeholder="+86 请输入手机号"
            type="number"
            maxlength="11"
          />
        </view>

        <!-- 新手机号输入框 -->
        <view class="input-group">
          <input 
            class="phone-input" 
            v-model="newPhone" 
            placeholder="+86 请输入新手机号"
            type="number"
            maxlength="11"
          />
        </view>

        <!-- 验证码输入框 -->
        <view class="input-group verification-group">
          <input 
            class="verification-input" 
            v-model="verificationCode" 
            placeholder="请输入验证码"
            type="number"
            maxlength="6"
          />
          <view class="get-code-btn" :class="isCodeDisabled?'disabled':'' " @click="getVerificationCode">
            <text class="get-code-text">{{ codeButtonText }}</text>
          </view>
        </view>
      </view>

      <!-- 完成绑定按钮 -->
      <view class="complete-btn" :class="!canSubmit?'disabled':''" @click="completeBinding">
        <text class="complete-btn-text">完成绑定</text>
      </view>
    </view>
  </view>
</template>

<script>
import { API_CONFIG } from '../../utils/config.js'

export default {
  data() {
    return {
      originalPhone: '',
      newPhone: '',
      verificationCode: '',
      isCodeDisabled: false,
      countdown: 0,
      codeButtonText: '获取验证码'
    }
  },

  computed: {
    canSubmit() {
      return this.originalPhone.length === 11 && 
             this.newPhone.length === 11 && 
             this.verificationCode.length >=4
    }
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 获取验证码
    getVerificationCode() {
      if (this.isCodeDisabled) return

      if (!this.originalPhone) {
        uni.showToast({
          title: '请输入原手机号',
          icon: 'none'
        })
        return
      }

      if (this.originalPhone.length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }

      // 开始倒计时
      this.startCountdown()

      // 调用获取验证码接口
      this.requestVerificationCode()
    },

    // 开始倒计时
    startCountdown() {
      this.isCodeDisabled = true
      this.countdown = 60
      this.codeButtonText = `${this.countdown}s`

      const timer = setInterval(() => {
        this.countdown--
        this.codeButtonText = `${this.countdown}s`

        if (this.countdown <= 0) {
          clearInterval(timer)
          this.isCodeDisabled = false
          this.codeButtonText = '获取验证码'
        }
      }, 1000)
    },

    // 请求验证码
    async requestVerificationCode() {
      try {
        const response = await uni.request({
          url: API_CONFIG.BASE_URL + '/admin/sms/send',
          method: 'POST',
          data: {
            mobile: this.newPhone,
            event: 'bind',
          },
          header: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${uni.getStorageSync('token')}`
          }
        })

        if (response.data.code === 0) {
          uni.showToast({
            title: '验证码已发送',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: response.data.message || '发送失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      }
    },

    // 完成绑定
    async completeBinding() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请完善所有信息',
          icon: 'none'
        })
        return
      }

      try {
        uni.showLoading({
          title: '绑定中...'
        })

        const response = await uni.request({
          url: API_CONFIG.BASE_URL + '/admin/member/updateMobile',
          method: 'POST',
          data: {
            mobile: this.newPhone,
            code: this.verificationCode
          },
          header: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${uni.getStorageSync('token')}`
          }
        })

        uni.hideLoading()

        if (response.data.code === 0) {
          uni.showToast({
            title: '绑定成功',
            icon: 'success'
          })

          // 更新本地存储的用户信息
          const userInfo = uni.getStorageSync('userInfo')
          if (userInfo) {
            userInfo.phone = this.newPhone
            uni.setStorageSync('userInfo', userInfo)
          }

          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: response.data.message || '绑定失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.unbind-phone-container {
  min-height: 100vh;
  background-color: #3A3052;
  display: flex;
  flex-direction: column;
}

/* 顶部标题栏 */
.header {
  background-color: #4A4062;
  padding: 10px 65px 10px 15px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  width: 40px;
  height: 40px;
  background-color: rgba(240, 217, 181, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:active {
  background-color: rgba(240, 217, 181, 0.2);
  transform: scale(0.95);
}

.back-arrow {
  color: #F0D9B5;
  font-size: 20px;
  font-weight: bold;
}

.title {
  flex: 1;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

/* 主要内容区域 */
.content {
  flex: 1;
  padding: 40px 20px 20px;
}

/* 提示文字 */
.prompt-text {
  text-align: center;
  margin-bottom: 40px;
}

.prompt {
  color: #8F82A8;
  font-size: 18px;
  font-weight: 500;
}

/* 表单容器 */
.form-container {
  margin-bottom: 40px;
}

/* 输入组 */
.input-group {
  margin-bottom: 20px;
}

.phone-input {
  width: 100%;
  height: 50px;
  background-color: #52496D;
  border: 1px solid #8F82A8;
  border-radius: 25px;
  padding: 0 20px;
  color: #FFFFFF;
  font-size: 16px;
  box-sizing: border-box;
}

.phone-input::placeholder {
  color: #8F82A8;
}

/* 验证码输入组 */
.verification-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verification-input {
  flex: 1;
  height: 50px;
  background-color: #52496D;
  border: 1px solid #8F82A8;
  border-radius: 25px;
  padding: 0 20px;
  color: #FFFFFF;
  font-size: 16px;
  box-sizing: border-box;
}

.verification-input::placeholder {
  color: #8F82A8;
}

.get-code-btn {
  height: 50px;
  background-color: #F0D9B5;
  border-radius: 25px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.get-code-btn:active {
  background-color: #E0C090;
  transform: scale(0.95);
}

.get-code-btn.disabled {
  background-color: #8F82A8;
  cursor: not-allowed;
}

.get-code-btn.disabled:active {
  transform: none;
}

.get-code-text {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

/* 完成绑定按钮 */
.complete-btn {
  width: 100%;
  height: 50px;
  background-color: #F0D9B5;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.complete-btn:active {
  background-color: #E0C090;
  transform: scale(0.95);
}

.complete-btn.disabled {
  background-color: #8F82A8;
  cursor: not-allowed;
}

.complete-btn.disabled:active {
  transform: none;
}

.complete-btn-text {
  color: #333;
  font-size: 16px;
  font-weight: 600;
}
</style>
